Angular Material এর MatTree কম্পোনেন্ট ট্রি ভিউ তৈরি করতে ব্যবহৃত হয়, যেখানে ডেটা একটি কাঠামোবদ্ধ হায়ারার্কির (hierarchical) আকারে প্রদর্শিত হয়। এটি সাধারণত ব্যবহারকারীদের তথ্য নেভিগেশনে সাহায্য করতে ব্যবহৃত হয়, যেমন ফাইল সিস্টেম বা ক্যাটেগরি বায়ানির জন্য। Lazy loading এর মাধ্যমে, বড় ডেটা কাঠামোকে শুধু তখনই লোড করা হয় যখন সেই ডেটার প্রয়োজন হয়, যা অ্যাপ্লিকেশন পারফরম্যান্সে বড় ধরনের উন্নতি নিয়ে আসে।

এই টিউটোরিয়ালে, আমরা দেখব কীভাবে Angular Material এর MatTree কম্পোনেন্টের সাথে লেজি লোডিং কার্যকারিতা ইমপ্লিমেন্ট করা যায়।

লেজি লোডিং ট্রি নোড ব্যবহার করা

Angular Material এর MatTree কম্পোনেন্ট ট্রি নোড লোড করতে FlatTree বা NestedTree ব্যবহার করতে পারে। লেজি লোডিং ট্রি নোড সাধারণত NestedTree এর মাধ্যমে ব্যবহৃত হয়, যেখানে শিশুর নোডগুলো ক্লিক করার পর লোড হয়।

১. মডিউল ইমপোর্ট করা

প্রথমে MatTreeModule এবং MatIconModule ইমপোর্ট করতে হবে।

import { MatTreeModule } from '@angular/material/tree';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [
    MatTreeModule,
    MatIconModule,
    MatButtonModule
  ]
})
export class AppModule {}

২. লেজি লোডিং ট্রি নোডের জন্য ডেটা উৎস তৈরি করা

লেজি লোডিং ট্রি নোডের জন্য ডেটা উৎস তৈরি করতে হবে। উদাহরণস্বরূপ, একটি TreeControl এবং DataSource তৈরি করা হয় যা ডেটার লেজি লোডিং পরিচালনা করবে।

import { Component } from '@angular/core';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { FlatTreeControl } from '@angular/cdk/tree';

interface ExampleNode {
  name: string;
  children?: ExampleNode[];
}

@Component({
  selector: 'app-tree',
  templateUrl: './tree.component.html',
  styleUrls: ['./tree.component.css']
})
export class TreeComponent {
  treeControl: FlatTreeControl<any>;
  treeFlattener: MatTreeFlattener<any, any>;
  dataSource: MatTreeFlatDataSource<any, any>;

  constructor() {
    const transformer = (node: ExampleNode, level: number) => ({
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level
    });

    this.treeFlattener = new MatTreeFlattener(transformer, node => node.level, node => node.expandable, node => node.children);
    this.treeControl = new FlatTreeControl<any, any>(node => node.level, node => node.expandable);
    this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
  }

  // লেজি লোডিং ফাংশন
  getChildren(node: ExampleNode): ExampleNode[] {
    return node.children ? node.children : [];
  }

  hasChild = (_: number, node: any) => node.expandable;
}

এখানে:

• MatTreeFlattener: এটি একটি ট্রি নোডকে ফ্ল্যাট (level এবং expandable এর মাধ্যমে) করতে ব্যবহৃত হয়।
• FlatTreeControl: এটি ট্রি নিয়ন্ত্রণ করতে ব্যবহৃত হয়, যেমন এক্সপ্যান্ড বা কোলাপ্স করা।
• MatTreeFlatDataSource: এটি ডেটা সোর্সের মাধ্যমে ডেটা সন্নিবেশিত করে।

৩. HTML টেমপ্লেট তৈরি করা

এখন HTML টেমপ্লেটে ট্রি ভিউটি দেখানোর জন্য কোড লিখতে হবে।

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    <button mat-icon-button disabled></button>
    {{node.name}}
  </mat-tree-node>

  <mat-tree-node *matTreeNodeDef="let node; when: hasChild">
    <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_less' : 'expand_more'}}
      </mat-icon>
    </button>
    {{node.name}}
  </mat-tree-node>
</mat-tree>

এখানে:

• mat-tree: এটি MatTree কম্পোনেন্টের মূল কন্টেইনার।
• mat-tree-node: এটি ট্রি নোডের জন্য ব্যবহার করা হয়, যা পিতামাতার নোড এবং শিশুর নোড আলাদা করে।
• matTreeNodeToggle: এটি টগল ফাংশনালিটি যুক্ত করে, যা ব্যবহারকারীর ক্লিকের মাধ্যমে ট্রি নোড এক্সপ্যান্ড বা কোলাপ্স করে।

৪. লেজি লোডিং অ্যাপ্লিকেশন

এখন আপনি লেজি লোডিং ইমপ্লিমেন্ট করতে getChildren ফাংশন ব্যবহার করতে পারেন, যা পিতামাতার নোডের ক্লিক করার পর শুধুমাত্র সেই নোডের শিশুদের লোড করবে।

// লেজি লোডিং ফাংশন
getChildren(node: ExampleNode): ExampleNode[] {
  if (!node.children) {
    node.children = this.loadData(node.name); // লোড ডেটা
  }
  return node.children;
}

// ডেটা লোড করার জন্য একটি সিম্পল ফাংশন
loadData(parentName: string): ExampleNode[] {
  // এখানে API কল বা স্ট্যাটিক ডেটা লোড করা যেতে পারে
  return [
    { name: `${parentName} Child 1` },
    { name: `${parentName} Child 2` },
  ];
}

এখানে, getChildren ফাংশনটি শুধুমাত্র তখনই শিশু নোড লোড করবে যখন পিতামাতা নোডটি ক্লিক করা হবে, যা লেজি লোডিং এর ধারণা অনুসরণ করে।

MatTree কম্পোনেন্টের মাধ্যমে Angular Material এ লেজি লোডিং ট্রি নোড তৈরি করা সহজ এবং কার্যকরী। FlatTree এবং NestedTree এর মাধ্যমে আপনি ডেটা কাঠামোকে দক্ষভাবে ম্যানেজ করতে পারেন। লেজি লোডিং দ্বারা শুধুমাত্র প্রয়োজনীয় ডেটা লোড হয়, যা পারফরম্যান্স উন্নত করতে সহায়তা করে। MatTree কম্পোনেন্টে লেজি লোডিং কার্যকারিতা ইমপ্লিমেন্ট করে, আপনি বড় ডেটাসেট পরিচালনা করতে পারেন, যাতে ব্যবহারকারীরা দ্রুত এবং সহজভাবে অ্যাপ্লিকেশনের ট্রি ডেটা দেখতে পায়।